<%--
  Created by IntelliJ IDEA.
  User: ZiFeng
  Date: 2022/11/9
  Time: 15:57
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp" %>
<link rel="stylesheet" type="text/css" href="#">
<html>
<head>
    <title>个人主页</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }

        a
        {
            text-decoration: none;
        }

        body
        {
            background: url(image/bg.png) no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }

        .content
        {
            z-index: 0;
            text-align: center;
            width: 800px;
            height: 500px;
            margin: 5% auto 0 auto;
            border-radius: 10px;
            background-color: rgba(236, 236, 236, 0.59);
            transition: all 0.8s;
        }

        .content img
        {
            z-index: 1;
            top: 20px;
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
        }

        .content:hover
        {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.52);
        }


        .content_child
        {
            display: inline-block;
            width: 100%;
            text-align: center;
        }

        .link
        {
            margin-top: 30px;
        }

        .link a
        {
            display: block;
            float: left;
            width: 120px;
            height: 45px;
            margin: 5px 5px 0 0;
            line-height: 45px;
            transition: all 0.8s;
            border-radius: 10px;
            background-color: #53a8b2;
            color: #faf5f5;
            font-size: 17px;
            font-weight: 150;
        }

        .link a:hover
        {
            background-color: rgba(0, 201, 243, 0.40);
        }

/*        .btn
        {
            border-radius: 100px;
        }*/

        .username
        {
            color: #333333;
            font-size: 40px;
            font-weight: 150;
        }
    </style>
</head>
<body>
<div class="topnav">
    <div class="header">
        <h1 id="myh1">欢迎光临宠物商店!</h1>
    </div>

    <!--跳转到目录下的网页。网页大体是一样的，只是展示的商品不一样-->
    <a href="welcome" target="_self">首页</a>
    <a href="category?categoryId=cat" id="cat" target="_self">猫猫</a>
    <a href="category?categoryId=dog" id="dog" target="_self">修勾</a>
    <a href="category?categoryId=bird" id=bird target="_self">鸽子</a>
    <a href="category?categoryId=pokemon" id="pokemon" target="_self">宝可梦</a>
    <a href="category?categoryId=bugCat" id="bugCat" target="_self">猫猫虫</a>
    <!--搜索框-->
    <form action="Search" method="post">
        <div class="searchDiv" id="searchDiv">
            <input type="text" name="searchName" placeholder="请输入想搜索的商品" style="float: left;outline: none;border-style:none; height: 43px;" id="searchName">
            <input type="submit" name="submitSearch" id="#" value="搜索" class="searchBtn">
            <div id="autoComplete" class="searchComp" style="top: 98px;">
                <li id="autoCompleteLi">
                </li>
            </div>
        </div>
    </form>
    <!--搜索框-->
    <c:if test="${sessionScope.username != null}">
        <a href="#" style="float: right;" class="currentSelect" target="_self">个人中心</a>
    </c:if>
    <c:if test="${sessionScope.username == null}">
        <a href="login" style="float: right;" target="_self">欢迎登录</a>
    </c:if>
    <a href="cart" style="float: right;" target="_self">购物车</a>
</div>

<%--若未登录提示登录--%>
<c:if test="${sessionScope.username == null}">
    <div>
        <h1 style="text-align: center;"><a href="login" onMouseOver="this.style.color='#70B6BF'"
                                           onMouseOut="this.style.color='black'" style="font-size: 100px;"
                                           target="_self">点击去登录</a></h1>
    </div>
</c:if>

<c:if test="${sessionScope.username != null}">
    <div class="content">
        <img src="image/mainPage/birdMain.PNG" alt="头像">
            <div class="content_child">
                <h2 class="username">${sessionScope.username}</h2>
    <%--                <p class="cc">欢迎来到我的主页，一位热爱编程的小渣渣~</p>
                <p class="cc">爱好计算机，会去自学一些感兴趣的东西 !</p>
                <br>
                <p class="color_1">I am an ambitious salted fish!</p>
                <p class="color_1">我是一位有野心的咸鱼!</p>
                <br>
                <p class="deeppink">只要路是对的，就不怕路远。</p>
                <p class="deeppink">As long as the road is right, you are not afraid of the distance.</p>--%>
                <div class="link" style="display: inline-block">
                    <a href="cart" class="btn" target="_self">我的购物车</a>
                    <a href="#" class="btn" target="_self">修改头像</a>
                    <a href="#" class="btn" target="_self">修改密码</a>
                    <a href="logout" class="btn" target="_self">退出登录</a>
                </div>
            </div>
    </div>
</c:if>

</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="javascripts/autoComplete.js"></script>
</html>
